<template>
  <div class="main">
    <div class="tan_chuang">
      <!-- 搜索部分 -->
      <div class="main-el-row-header">
        <div class="header-title">
          <div class="hang_title">
            <div class="one_title">电离层闪烁 S4 观测数据</div>
            <div class="you"></div>
          </div>
        </div>
        <div class="header-content">
          <div class="form_div">
            <div>时间范围：</div>
            <div>
              <el-date-picker
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="form.setTime"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </div>
            <div style="text-align: center">至</div>
            <div>
              <el-date-picker
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                v-model="form.endTime"
              ></el-date-picker>
            </div>
          </div>
          <div>
            <el-button
              size="small"
              @click="searchInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >搜 索</el-button
            >
            <el-button
              size="small"
              @click="resettingInfo()"
              type="primary"
              style="margin-left: 5px"
              class="bg_button"
              >重置</el-button
            >
          </div>
          <div class="btnzu">
            <div class="footer_left">
              <div>
                <el-button
                  class="bg_add"
                  type="primary"
                  icon="el-icon-plus"
                  plain
                  @click="add"
                  >新增</el-button
                >
              </div>
              <div>
                <el-button
                  class="bg_dao"
                  type="warning"
                  icon="el-icon-download"
                  plain
                  >导出</el-button
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 列表 -->
      <div class="main-el-row-content">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="showData"
          style="width: 100%"
          class="my-table"
          height="620px"
          :header-cell-style="{ color: '#84F2FF' }"
          :cell-style="{ color: '#84F2FF' }"
          ref="multipleTable"
          :cell-class-name="tableCellClassName"
        >
          <!-- <el-table-column type="selection" width="55" align="left">
                </el-table-column> -->
          <el-table-column prop="station" label="台站编号" align="left">
          </el-table-column>
          <el-table-column prop="dayHhmm" label="时间" align="left">
          </el-table-column>
          <el-table-column prop="satno" label="卫星编号" align="left">
          </el-table-column>
          <el-table-column prop="azi" label="方位角" align="left">
          </el-table-column>
          <el-table-column prop="ele" label="仰角" align="left">
          </el-table-column>
          <el-table-column prop="lS4" label="L频段S4数据" align="left">
          </el-table-column>
          <el-table-column prop="flag" label="标签" align="left">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button
                  type="text"
                  @click="ckdate(scope.row, 'chakan')"
                  size="small"
                  >查看</el-button
                >
                &nbsp; -->
              <el-button
                type="text"
                @click="update(scope.row, 'edit')"
                size="small"
                ><span class="el-icon-edit">编辑</span></el-button
              >
              &nbsp;
              <el-button
                type="text"
                @click="deletes(scope.row, 'delete')"
                size="small"
                style="color: #fe2e64"
                ><span class="el-icon-delete">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="div-el-pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            background
            layout="prev, pager, next, total, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 增 -->
    <div class="add">
      <el-dialog :visible.sync="dialogAdd" width="600px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">新增</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>

        <el-form :model="formAdd" label-width="120px" ref="form">
          <el-form-item label="台站编号" prop="station">
            <el-input v-model="formAdd.station"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="dayHhmm">
            <el-date-picker
              v-model="formAdd.dayHhmm"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="卫星编号" prop="satno">
            <el-input v-model="formAdd.satno"></el-input>
          </el-form-item>
          <el-form-item label="方位角" prop="azi">
            <el-input v-model="formAdd.azi"></el-input>
          </el-form-item>
          <el-form-item label="仰角" prop="ele">
            <el-input v-model="formAdd.ele"></el-input>
          </el-form-item>
          <el-form-item label="L频段S4数据" prop="lS4">
            <el-input v-model="formAdd.lS4"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="flag">
            <!-- <template>
                <el-upload
                  v-if="formAdd.flag == ''"
                  class="upload-demo"
                  action=""
                  multiple
                  :limit="3"
                  show-file-list
                  :auto-upload="false"
                  :on-change="
                    (file) => {
                      handleChange2(file, 'add');
                    }
                  "
                  v-model="formAdd.flag"
                >
                  <span class="aaaaa">上传</span>
                </el-upload>
                <div class="chuan" v-else>
                  {{ modelname }}
                  <i @click="no_click" class="xiaoshi"></i>
                </div>
              </template> -->
            <el-input v-model="formAdd.flag"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" class="bg_button" @click="dialogAdd = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="addInfo('from')"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 改 -->
    <div class="update">
      <el-dialog :visible.sync="dialogUpdate" width="600px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">修改</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="formUpdate" label-width="120px" ref="form">
          <el-form-item label="台站编号" prop="station">
            <el-input v-model="formUpdate.station"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="dayHhmm">
            <el-date-picker
              v-model="formUpdate.dayHhmm"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="卫星编号" prop="satno">
            <el-input v-model="formUpdate.satno"></el-input>
          </el-form-item>
          <el-form-item label="方位角" prop="azi">
            <el-input v-model="formUpdate.azi"></el-input>
          </el-form-item>
          <el-form-item label="仰角" prop="ele">
            <el-input v-model="formUpdate.ele"></el-input>
          </el-form-item>
          <el-form-item label="L频段S4数据" prop="lS4">
            <el-input v-model="formUpdate.lS4"></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="flag">
            <!-- <template>
                <el-upload
                  v-if="formAdd.flag == ''"
                  class="upload-demo"
                  action=""
                  multiple
                  :limit="3"
                  show-file-list
                  :auto-upload="false"
                  :on-change="
                    (file) => {
                      handleChange2(file, 'add');
                    }
                  "
                  v-model="formAdd.flag"
                >
                  <span class="aaaaa">上传</span>
                </el-upload>
                <div class="chuan" v-else>
                  {{ modelname }}
                  <i @click="no_click" class="xiaoshi"></i>
                </div>
              </template> -->
            <el-input v-model="formUpdate.flag"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="bg_button"
            @click="dialogUpdate = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="updateInfo()"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 删 -->
    <div class="deletes">
      <el-dialog :visible.sync="dialogDeletes" width="600px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">删除</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <el-form :model="formDeletes" label-width="120px" ref="form">
          <el-form-item label="台站编号" prop="station">
            <el-input v-model="formDeletes.station" disabled></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="dayHhmm">
            <el-date-picker
              v-model="formDeletes.dayHhmm"
              value-format="yyyy-MM-dd hh:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
              disabled
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="卫星编号" prop="satno">
            <el-input v-model="formDeletes.satno" disabled></el-input>
          </el-form-item>
          <el-form-item label="方位角" prop="azi">
            <el-input v-model="formDeletes.azi" disabled></el-input>
          </el-form-item>
          <el-form-item label="仰角" prop="ele">
            <el-input v-model="formDeletes.ele" disabled></el-input>
          </el-form-item>
          <el-form-item label="L频段S4数据" prop="lS4">
            <el-input v-model="formDeletes.lS4" disabled></el-input>
          </el-form-item>
          <el-form-item label="标签" prop="flag">
            <!-- <template>
                <el-upload
                  v-if="formAdd.flag == ''"
                  class="upload-demo"
                  action=""
                  multiple
                  :limit="3"
                  show-file-list
                  :auto-upload="false"
                  :on-change="
                    (file) => {
                      handleChange2(file, 'add');
                    }
                  "
                  v-model="formAdd.flag"
                >
                  <span class="aaaaa">上传</span>
                </el-upload>
                <div class="chuan" v-else>
                  {{ modelname }}
                  <i @click="no_click" class="xiaoshi"></i>
                </div>
              </template> -->
            <el-input v-model="formDeletes.flag" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="bg_button"
            @click="dialogDeletes = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="deletesInfo()"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!-- 查看 -->
    <div class="deletes">
      <el-dialog :visible.sync="dialogChakan" width="620px" height="395px">
        <div slot="title" class="dialog-title">
          <el-row class="red">
            <span class="dialog-title-text">查看</span>
            <span class="dialog-title-you"></span>
            <!-- <el-button type="primary" style="float:right" @click="edit_pr">编辑</el-button> -->
          </el-row>
        </div>
        <div class="dialog-img">
          <el-image
            :src="'http://192.168.10.146:18080/api/idatamanage/samba' + images"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="bg_button"
            @click="dialogChakan = false"
            >取 消</el-button
          >
          <el-button
            size="small"
            class="bg_button"
            type="primary"
            @click="chakanInfo()"
            >确 认</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>
      
      <script>
import { post } from "@/utils/request";
export default {
  name: "ScintS4",
  data() {
    return {
      showData: [], // 后台获取的数据放这
      pageSize: 10, // 一页多少条数据
      pageNum: 1, // 分页的第几页
      total: null, // 获取所有数据
      dialogAdd: false, // 控制新增弹窗的显示隐藏
      dialogUpdate: false, // 控制修改弹窗的显示隐藏
      dialogDeletes: false, // 控制删除弹窗的显示隐藏
      dialogChakan: false, // 查看
      currentTime: "", // 系统当前时间
      loading: true, // 加载
      images: "",
      form: {
        setTime: "", // 搜索的开始时间
        endTime: "", // 搜索的结束时间
      },
      formAdd: {
        // 可添加的所有字段
        station: "",
        dayHhmm: "",
        satno: "",
        azi: "",
        ele: "",
        lS4: "",
        flag: "",
      },
      formUpdate: {
        // 修改
        station: "",
        dayHhmm: "",
        satno: "",
        azi: "",
        ele: "",
        lS4: "",
        flag: "",
      },
      formDeletes: {
        // 修改
        station: "",
        dayHhmm: "",
        satno: "",
        azi: "",
        ele: "",
        lS4: "",
        flag: "",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.data_type = this.$route.query.item;
      if (this.data_type) {
        this.form.setTime = this.data_type;
        this.form.endTime = this.shijianc(new Date());
        this.getKjzElectronProtonFlux();
      } else {
        this.getKjzElectronProtonFlux();
      }
    },
    getKjzElectronProtonFlux() {
      let params;
      if (this.form.setTime && this.form.endTime) {
        params = {
          bgnDt: this.form.setTime,
          endDt: this.form.endTime,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
      } else {
        params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
      }
      console.log(params);
      post("/api/idatamanage/govData/queryScintS4", params).then((res) => {
        console.log(res);
        this.showData = res.data.data.dataList;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    handleCurrentChange(pageNum) {
      this.listLoading = true;
      this.pageNum = pageNum;
      //   console.log(this.pageNum); //点击第几页
      this.getKjzElectronProtonFlux();
    },
    shijianc(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    add() {
      //   console.log("新增弹窗");
      this.dialogAdd = true;
    },
    addTime() {
      let arr = this.formAdd.utc;
      this.formAdd.utc = this.shijianc(this.formAdd.utc);
      arr.setTime(arr.getTime() + 3600 * 1000 * 8);
      this.formAdd.dayHhmmss = this.shijianc(arr);
    },
    addInfo() {
      // let params;
      console.log(this.formAdd, "123321");
      // let params = {
      //   dayHhmmss: this.formAdd.dayHhmmss,
      //   path: this.formAdd.path,
      // };
    //   const fd = new FormData();
    //   //上传是以表单形式传值
    //   fd.append("dayHhmm", this.formAdd.dayHhmm);
    //   fd.append("flag", this.formAdd.flag);
    //   fd.append("p1", this.formAdd.p1);
    //   fd.append("p5", this.formAdd.p5);
    //   fd.append("p10", this.formAdd.p10);
    //   fd.append("p30", this.formAdd.p30);
    //   fd.append("p50", this.formAdd.p50);
    //   fd.append("p100", this.formAdd.p100);
      post("/api/idatamanage/govData/addScintS4", this.formAdd).then(
        (res) => {
          console.log(res);
          if (res.data.message == "成功") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogAdd = false;
            // 可添加的所有字段
            this.formAdd.dayHhmmss = "";
            this.formAdd.flag = "";
            this.formAdd.path = "";
          } else {
            this.$message.error("新增失败");
          }
        }
      );
    },
    ckdate(item) {
      console.log(item.path);
      this.dialogChakan = true;
      this.images = item.path;
      //   get("http://192.168.10.146:18080/api/idatamanage/samba" + item.path).then(
      //     (res) => {
      //       console.log(res);
      //     }
      //   );
      //   get("http://192.168.10.146:18080/api/idatamanage/samba" + item.path).then(
      //     (res) => {
      //       console.log(res);
      //     }
      //   );
    },
    no_click() {
      this.formAdd.flag = "";
      this.formUpdate.flag = "";
    },
    handleChange2(file, zhi) {
      if (zhi == "add") {
        this.formAdd.flag = {};
        this.modelname = file.name;
        this.formAdd.flag = file.raw;
      } else if (zhi == "update") {
        this.formUpdate.flag = {};
        this.modelname = file.name;
        this.formUpdate.flag = file.raw;
      } else if (zhi == "deletes") {
        this.formDeletes.flag = {};
        this.modelname = file.name;
        this.formDeletes.flag = file.raw;
      }

      // let fileName = file.uid + "." + "png"; // 如果可以上传多个文件，这里需要用fileList.forEach()处理
      // let f = new File([file.raw], fileName, { String });
      // f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
      // file.raw = f; // 用f替换file的数据

      // this.$refs.upload.submit(); // 手动触发上传
    },
    chakanInfo() {
      this.dialogChakan = false;
    },
    update(row) {
      //   console.log("修改弹窗", row);
      this.modelname = row.flag;
      this.dialogUpdate = true;
      this.formUpdate = row;
    },
    updateInfo() {
      // let params = this.formUpdate;
      console.log(this.formUpdate.flag);
    //   const fd = new FormData();
    //   //上传是以表单形式传值
    //   fd.append("dayHhmm", this.formAdd.dayHhmm);
    //   fd.append("flag", this.formAdd.flag);
    //   fd.append("p1", this.formAdd.p1);
    //   fd.append("p5", this.formAdd.p5);
    //   fd.append("p10", this.formAdd.p10);
    //   fd.append("p30", this.formAdd.p30);
    //   fd.append("p50", this.formAdd.p50);
    //   fd.append("p100", this.formAdd.p100);
      post("/api/idatamanage/govData/updateScintS4", this.formUpdate).then(
        (res) => {
          if (res.data.message == "成功") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogUpdate = false;
          } else {
            this.$message.error("修改失败");
          }
        }
      );
    },
    deletes(row) {
      //   console.log("删除弹窗");
      this.modelname = row.flag;
      this.formDeletes = row;
      this.dialogDeletes = true;
    },
    deletesInfo() {
      // let params = this.formDeletes;
      console.log(this.formDeletes);
    //   const fd = new FormData();

    //   fd.append("dayHhmm", this.formAdd.dayHhmmss);
    //   fd.append("flag", this.formAdd.flag);
    //   fd.append("p1", this.formAdd.p1);
    //   fd.append("p5", this.formAdd.p5);
    //   fd.append("p10", this.formAdd.p10);
    //   fd.append("p30", this.formAdd.p30);
    //   fd.append("p50", this.formAdd.p50);
    //   fd.append("p100", this.formAdd.p100);
      post("/api/idatamanage/govData/deleteScintS4", this.formDeletes).then(
        (res) => {
          if (res.data.message == "成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getKjzElectronProtonFlux();
            this.dialogDeletes = false;
          } else {
            this.$message.error("删除失败");
          }
        }
      );
    },
    ComplementZero(res) {
      if (res < 10) {
        return "0" + res;
      } else {
        return res;
      }
    },
    searchInfo() {
      this.loading = true;
      if (this.form.setTime && this.form.endTime) {
        if (this.form.setTime < this.form.endTime) {
          this.getKjzElectronProtonFlux();
        } else {
          this.$message("时间范围错误");
          this.loading = false;
        }
      } else {
        const date = new Date().getTime();
        const bgnDate = new Date(date), // 结束时间
          bgnY = bgnDate.getFullYear() + "-",
          bgnM = this.ComplementZero(bgnDate.getMonth() + 1) + "-",
          bgnD = this.ComplementZero(bgnDate.getDate()) + " ",
          bgnh = this.ComplementZero(bgnDate.getHours()) + ":",
          bgnm = this.ComplementZero(bgnDate.getMinutes()) + ":",
          bgns = this.ComplementZero(bgnDate.getSeconds());
        const bgnTime = bgnY + bgnM + bgnD + bgnh + bgnm + bgns;

        const halfYear = (365 / 2) * 24 * 3600 * 1000;
        const pastResult = date - halfYear;
        const pastDate = new Date(pastResult), // 开始时间
          endY = pastDate.getFullYear() + "-",
          endM = this.ComplementZero(pastDate.getMonth() + 1) + "-",
          endD = this.ComplementZero(pastDate.getDate()) + " ",
          endh = this.ComplementZero(pastDate.getHours()) + ":", //获取当前小时数(0-23)
          endm = this.ComplementZero(pastDate.getMinutes()) + ":", //获取当前分钟数(0-59)
          ends = this.ComplementZero(pastDate.getSeconds()); //获取当前秒数(0-59)
        const endTime = endY + endM + endD + endh + endm + ends; // 默认获取一年前 到现在的数据
        this.form.setTime = endTime;
        this.form.endTime = bgnTime;
        this.getKjzElectronProtonFlux();
      }
    },
    resettingInfo() {
      this.loading = true;
      this.form.setTime = "";
      this.form.endTime = "";
      this.getKjzElectronProtonFlux();
    },
  },
};
</script>
      <style src="../../../assets/css/common.css"></style>
      <style lang="scss" scoped>
.main {
  // 最外层的盒子
  font-family: "宋体";
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  height: 85vh;

  .add {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }

    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .update {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }
    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .deletes {
    .form_time {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .el-form-item {
        width: 48%;
        ::v-deep .el-input__inner {
          width: 300px !important;
        }
      }
    }
    .form_coordinate {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .el-form-item {
        width: 30%;
      }
    }
    .form_electron {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .form_proton {
      .buju {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        ::v-deep .el-form-item {
          width: 30%;
          .el-form-item {
            .el-form-item__content {
              .el-input {
                width: 40px;
              }
            }
          }
        }
      }
    }
    .dialog-footer {
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
  .upload-demo {
    .aaaaa {
      color: #fff;
    }
  }
  .chuan {
    display: flex;
    font-size: 16px;
    align-items: center;
    color: #fff;
    .xiaoshi {
      margin-left: 10px;
      display: flex;
      width: 12px !important;
      height: 12px !important;
      background: url("../../../assets/取消图标-常态.png") no-repeat center
        center;
      background-size: 100% 100%;
    }
    .xiaoshi:hover {
      background: url("../../../assets/取消图标-点击.png") no-repeat center
        center;
      background-size: 100% 100%;
    }
  }
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnzu {
  display: flex;
  width: 180px;
  margin: 0 0 0 30px;

  .footer_left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      width: 100px;
      .bg_add {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_add:hover {
        color: rgb(132, 242, 255);
      }
      .bg_dao {
        padding: 9px 15px;
        background: rgb(4, 119, 166);
        color: #fff;
        border: none;
      }
      .bg_dao:hover {
        color: #e6a23c;
      }
    }
  }
}
::v-deep .el-table__fixed-right::before {
  background: transparent !important;
}
::v-deep .el-table--border::after,
.el-table--group::after {
  background: transparent !important;
}

::v-deep .el-table {
  th {
    background-color: red($color: #000000) !important;
  }
}
.el-form-item__label {
  color: #fff !important;
  font-size: 18px !important;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgb(8, 79, 140) !important;
}

// ::v-deep .el-table .cell {
//   font-size: 18px;
//   color: #c4d1dd;
// }
.div-el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-table::before {
  content: "";
  position: absolute;
  background-color: transparent;
  z-index: 1;
}
::v-deep .el-table tr {
  background-color: transparent;
}

// .el-dialog {
//   background-color: rgba(8, 79, 140, 1);
// }
::v-deep .el-table--striped {
  .el-table__body {
    tr.el-table__row--striped {
      td.el-table__cell {
        background: #0077a9;
      }
    }
  }
}

::v-deep .el-input__icon {
  line-height: 32px;
}
::v-deep .el-table--border,
.el-table--group {
  border: none;
}
::v-deep .el-table--border .el-table__cell {
  border-top: 1px solid #ebeef5;
  font-size: 14px;
}
::v-deep .el-button + .el-button {
  margin: 0;
}
.title_table {
  color: #84f2ff;
  font-size: 18px;
}
</style>